import QtQuick 2.0
import Sailfish.Silica 1.0

BackgroundItem {
    id: root

    property alias label: titleText.text
    property alias value: valueText.text
    property string description

    property alias labelColor: titleText.color
    property alias valueColor: valueText.color
    property color descriptionColor: root.down ? palette.secondaryHighlightColor : palette.secondaryColor

    property real labelMargin: root.leftMargin
    property real minimumContentHeight: Theme.itemSizeSmall
    property real leftMargin: Theme.horizontalPageMargin
    property real rightMargin: Theme.horizontalPageMargin

    property int _duration: 200
    property Item _descriptionLabel

    width: parent ? parent.width : 0
    height: contentItem.height
    contentHeight: visible ? Math.max(column.height + 2*Theme.paddingMedium, minimumContentHeight) : 0
    opacity: enabled ? 1.0 : Theme.opacityLow

    onDescriptionChanged: {
        if (!_descriptionLabel && description.length > 0)
            _descriptionLabel = descriptionComponent.createObject(column)
    }

    Column {
        id: column

        anchors {
            left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter
            leftMargin: root.labelMargin; rightMargin: root.rightMargin
        }
        Row {
            id: flow

            width: parent.width
            height: Math.max(titleText.height,valueText.height)
            move: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: root._duration } }

            Label {
                id: titleText

                color: root.down ? palette.highlightColor : palette.primaryColor
                width: Math.min(implicitWidth + Theme.paddingMedium, parent.width)
                height: text.length ? implicitHeight : 0
                fontSizeMode: Text.HorizontalFit
                minimumPixelSize: Theme.fontSizeSmallBase
                truncationMode: TruncationMode.Fade
                anchors.left: parent.left
            }

            Label {
                id: valueText

                color: palette.highlightColor
                width: Math.min(implicitWidth, parent.width)
                truncationMode: TruncationMode.Fade
                font.pixelSize: Theme.fontSizeSmall
                anchors.right: parent.right
            }
        }
    }

    Component {
        id: descriptionComponent

        Label {
            text: root.description
            height: text.length ? (implicitHeight + Theme.paddingMedium) : 0
            width: parent.width
            font.pixelSize: Theme.fontSizeExtraSmall
            color: descriptionColor
            wrapMode: Text.Wrap
        }
    }
}
